class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

function setAttr(node, key, value) {
    switch (key) {
        case 'value':
            if (node.tagName.toUpperCase() === 'INPUT' || node.tagName.toUpperCase() === 'TEXTAREA') {
                node.value = value;
            } else {
                node.setAttribute(key, value);
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
    }
}

function createElement(type, props, children) {
    return new Element(type, props, children);
};

//渲染方法
function render(eleObj) {
    //创建元素
    let el = document.createElement(eleObj.type);
    //设置属性
    for (let key in eleObj.props) {
        setAttr(el, key, eleObj.props[key]);
    }
    //递归渲染子元素
    eleObj.children.forEach((child) => {
        child = (child instanceof Element) ? render(child) : document.createTextNode(child);
        el.appendChild(child)
    })
    return el;
}

//渲染DOM至指定节点
function renderDom(el, traget) {
    traget.appendChild(el);

}

export {createElement, render, Element, renderDom}